<template>
	<view class="content" style="">


		<view class="" style="width: 750rpx;" v-if="!flag">
			<!-- <uni-nav-bar backgroundColor="#F5F5F5" title="多威防伪查询溯源系统" :border="false"></uni-nav-bar> -->
			<view class="" style="display: flex;justify-content: space-between;margin-top: 44rpx;padding: 0 24rpx;">
				<image style="width: 260rpx;height: 70rpx;" src="/static/duowei.png" mode="aspectFill"></image>
				<view class="" style="display: flex;flex-direction: column;align-items: flex-end;">
					<view class="" style="font-size: 40rpx;font-weight: bold;">
						{{Info.code}}
					</view>
					<view class="" style="font-size: 28rpx;color: #777777;margin-top: 5rpx;">
						查询次数：{{Info.num}}次
					</view>
				</view>
			</view> 

			<view style="border-bottom: 1rpx solid #EEEEEE;margin-top: 56rpx;"></view>

			<view class="" style="font-size: 28rpx;padding: 30rpx 24rpx;">
				将上方唯一码信息的12位编码与商品的12位编码进行数值和字母的比对。
			</view>
			<view style="border-bottom: 1rpx solid #EEEEEE;"></view>

			<view class="" v-if="Info.is_show"
				style="height: 60rpx;background-color: #F5F5F5;padding: 18rpx 24rpx 18rpx 24rpx;display: flex;align-items: center;">
				款号信息
			</view>
			<view class="" v-if="Info.is_show">
				<view class=""
					style="padding: 22rpx 24rpx;border-bottom: 1rpx solid #EEEEEE;display: flex;margin-top: 12rpx;">
					<view class="" style="width: 250rpx;font-size: 28rpx;">
						款号
					</view>
					<view class="" style="width: 424rpx;font-size: 28rpx;">
						{{Info.item_no}}
					</view>

				</view>
				<view class=""
					style="padding: 22rpx 24rpx;border-bottom: 1rpx solid #EEEEEE;display: flex;margin-top: 12rpx;">
					<view class="" style="width: 250rpx;font-size: 28rpx;">
						系列
					</view>
					<view class="" style="width: 424rpx;font-size: 28rpx;">
						{{Info.series}}
					</view>

				</view>
				<view class=""
					style="padding: 22rpx 24rpx;border-bottom: 1rpx solid #EEEEEE;display: flex;margin-top: 12rpx;">
					<view class="" style="width: 250rpx;font-size: 28rpx;">
						介绍
					</view>
					<view class="" style="width: 424rpx;font-size: 28rpx;">
						{{Info.memo}}
					</view>

				</view>
				<view class="" style="padding: 22rpx 24rpx;">
					<view class="">
						图片
					</view>

					<image style="width: 654rpx;height: 498rpx;margin-top: 30rpx;" :src="Info.img" mode=""></image>
				</view>
			</view>


			<view class=""
				style="height: 80rpx;display: flex;justify-content: space-between;padding: 20rpx;background-color: #F5F5F5;">
				<view class="" style="display: flex;flex-direction: column;justify-content: center;align-items: center;"
					v-for="(item,i) in tabsList" :key="tabsList">
					<view class="" style="margin-bottom: 20rpx;" :class="item.status ? 'active' : ''"
						@click="handleTabs(i)">
						{{item.name}}
					</view>
					<view class=""
						:style="item.status ? 'border-bottom: 6rpx solid #D6151A;' : 'border-bottom: 6rpx solid #F5F5F5;'"
						style="width: 128rpx;">

					</view>
				</view>

			</view>
 
			<view class="" v-for="(item,i) in list " :key="i" >
				<image style="width: 100%;vertical-align: bottom;" :src="item" mode="widthFix"></image>
			</view>
			<!-- <u-tabs :list="tabsList" @click="handleTabs" :scrollable="false" itemStyle="width:160rpx"></u-tabs> -->

		</view>

		<view class="load" v-if="loading">
			<image src="/static/logoDuowei.gif" mode="aspectFit"></image>
		</view>
 
		<view class="" v-if="flag"
			style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100vh;background-color: white;flex-direction: column;">
			<image style="width: 332rpx;height: 192rpx;" src="/static/no_data.png" mode=""></image>
			<view class="" style="font-size: 28rpx;margin-top: 42rpx;">
				暂无查询结果
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'


	const tabsList = reactive([{
		name: '品牌简介',
		val: 0,
		status: 1
	}, {
		name: '产品介绍',
		val: 1,
		status: 0
	}, {
		name: '清洗保养与风险提示',
		val: 2,
		status: 0
	}])

	const status = ref(0)
	const code = ref('')
	let Info = ref({}) //数据
	const list = ref([]) //详情的数据列表
	const loading = ref(true)
	const url = getApp().globalData.imageUrl;
	const flag = ref(false) //显示缺省页面
	
	onLoad((e) => {



		code.value = e.code;

		//code.value = e.code;
		getData()
		//console.log(code.value);
	})
	// tabs点击
	const handleTabs = (i) => {

		tabsList.forEach((item, index) => {
			if (i == index) {
				item.status = 1;
			} else {
				item.status = 0;
			}
			//getData()

		})
		if (i == 0) {
			list.value = Info.value.brand;

		} else if (i == 1) {

			list.value = Info.value.product;
		} else {

			list.value = Info.value.service;
		}

	}

	const getData = () => {
		uni.request({
			url: url + '/api/index/index',
			data: {
				code: code.value
			},
			success(e) {
	 
				if (e.data.code == 1) {
					Info.value = e.data.msg
					list.value = Info.value.brand;
				} else {
					flag.value = true;
				}			
				setTimeout(() => {
				loading.value = false;
				}, 1000)
		return 
			}
		})
	}
</script>

<style scoped lang="scss">
	.active {
		color: #D6151A;
	}

	.content {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.load {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: #FFFFFF;
		z-index: 99;

		image {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 200rpx;
		}
	}
</style>